@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/breakpoints";

.launchpad-container {
	height: 100%;
	display: flex;
	flex-direction: column;
}

// Launchpad Content.
.launchpad-container__content {
	display: flex;
	flex-direction: column;

	@include break-large {
		height: 100%;
		min-height: calc(100vh - 60px); // Discount margin-top from `.step-route`.
		flex-direction: row;
	}
}

// Launchpad Sidebar.
.launchpad-container__sidebar {
	display: flex;
	flex-direction: column;
	max-width: 100%;

	@include break-large {
		max-width: 360px;
	}

	// TODO: Migrate to the checklist components. The checklist could receive a special className as prop that would be responsible for this.
	.launchpad-container .checklist__tasks .checklist-item__task-content.is-placeholder .checklist-item__content {
		/* Override default placeholder colours to align with other elements on the page. */
		background-color: var(--color-neutral-5);
	}
}

// Main content.
.launchpad-container__main-content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

// Container spacings.
.launchpad-container__sidebar,
.launchpad-container__main-content {
	padding: 16px;

	@include break-large {
		padding: 40px;

		// Exception for the sidebar.
		&.launchpad-container__sidebar {
			padding-right: 32px;
		}
	}
}
